<template>
	<view class="sa-home-item" @click="online_player_item(itemData.id)">
		<view class="sa-home-item-border">
			<view class="play-icon">
				<text class="play-icon-level">{{ itemData.levels }}</text>
				<image :src="playLevelIcon"></image>
			</view>
			<view class="sa-home-item-img" :style="{ backgroundImage: 'url( ' + itemData.headImg + ' )' }"></view>
		</view>
		<view class="play-bottom-card">
			<view class="play-nick-name">{{ itemData.nickName }}</view>
			<view class="play-hourly-wage">
				<text class="play-hourly-price">{{ itemData.hourlyWage }}</text>
				<text class="play-hourly-unit">{{itemData.severPlayHourlyWageUnitStr}}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin } from '../config/common.js';
import play_level_icon from '@/static/images/play-level-icon.png';
import star from '@/static/images/star.png';
import praise_heart from '@/static/images/praise-heart.png';
export default {
	name: 'homeHot',
	props: {
		itemData: {
			Id: {
				type: String,
				default: ''
			},
			HeadImg: {
				type: String,
				default: ''
			},
			HourlyWage: {
				type: String,
				default: ''
			},
			Score: {
				type: String,
				default: ''
			},
			LikeCount: {
				type: String,
				default: ''
			},
			NickName: {
				type: String,
				default: ''
			},
			Levels: {
				type: String,
				default: ''
			}
		}
	},
	data() {
		return {
			playLevelIcon: play_level_icon,
			praiseHeart: praise_heart,
			star: star
		};
	},
	methods: {
		online_player_item(item_id) {
			if (isLogin()) {
				uni.navigateTo({
					url: '/packagePages/onlinePlay/kongjian/index?playerId=' + item_id
				});
			} else {
				toLogin();
			}
		},
	}
};
</script>

<style scoped lang="scss">
.sa-home-item {
	position: relative;
	width: 268rpx;
	height: 384rpx;
	border-radius: 20rpx;
	margin-right: 20rpx;
	background-color: #fff;
	// box-shadow: 0rpx 4rpx 8rpx rgba(68, 68, 68, 0.16);
	margin-right: 20rpx;
	overflow: hidden;
	.sa-home-item-border {
		height: 268rpx;
		width: 268rpx;

		.play-icon {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			width: 80rpx;
			height: 40rpx;
			text-align: center;
			line-height: 44rpx;
			&-level {
				position: absolute;
				color: #ffffff;
				right: 10rpx;
				width: 40rpx;
				font-size: $main-text-size-24;
				font-style: oblique;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	&-img {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.play-bottom-card {
		width: 100%;
		height: 138rpx;
		color: $main-text-color-gray-33;
		&-score {
			margin-left: 16rpx;
			display: flex;
			.play-bottom-card-score-item {
				display: flex;
				margin-right: 26rpx;
				align-items: center;
				.text {
					font-size: $main-text-size-24;
					font-family: 'SourceHanSansCN-Medium';
				}
				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
			}
		}
		.play-nick-name {
			font-size: $main-text-size-28;
			margin-left: 16rpx;
			margin-top: 16rpx;
			margin-bottom: 4rpx;
			font-family: 'SourceHanSansCN-Medium';
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 248rpx;
		}
		.play-hourly-price {
			margin-left: 16rpx;
			color: $main-text-color-main-orange;
		}
		.play-hourly-unit {
			font-size: $main-text-size-24;
		}
		.play-hourly-wage {
			font-size: $main-text-size-28;
			margin-bottom: 4rpx;
			font-family: 'SourceHanSansCN-Regular';
		}
	}
}
</style>
